<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar class="top-nav-bar" @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" color="#000" class="icon"/>
        <span>修改密码</span>
      </template>
    </van-nav-bar>
    <!-- 密码输入框 -->
    <van-cell-group class="ipt-box" :border="false">
      <van-field 
        v-model="password1"
        :type="isUserPasswordShow1 ? 'text' : 'password'"
        label="原密码" 
        placeholder="请输入原密码" 
        :maxlength="userConstants.USER_PASSWORD_MAX_LENGTH"
        center
        class="ipt"
        ref="userPassword1"
        clearable
      >
        <template #right-icon>
          <van-icon 
            name="closed-eye" 
            class="icon"
            v-show="!isUserPasswordShow1"
            @click="changePasswordIsShow1"
          />
          <van-icon 
            name="eye-o" 
            class="icon"
            v-show="isUserPasswordShow1"
            @click="changePasswordIsShow1"
          />
        </template>
      </van-field>
      <van-field 
        :type="isUserPasswordShow2 ? 'text' : 'password'"
        label="新密码" 
        placeholder="请输入新密码" 
        :maxlength="userConstants.USER_PASSWORD_MAX_LENGTH"
        center
        v-model="password2"
        class="ipt"
        ref="userPassword2"
        clearable
      >
        <template #right-icon>
          <van-icon 
            name="closed-eye" 
            class="icon"
            v-show="!isUserPasswordShow2"
            @click="changePasswordIsShow2"
          />
          <van-icon 
            name="eye-o" 
            class="icon"
            v-show="isUserPasswordShow2"
            @click="changePasswordIsShow2"
          />
        </template>
      </van-field>
      <van-field 
        :type="isUserPasswordShow3 ? 'text' : 'password'"
        label="确认密码" 
        placeholder="请确认新密码" 
        :maxlength="userConstants.USER_PASSWORD_MAX_LENGTH"
        center
        v-model="password3"
        class="ipt"
        ref="userPassword3"
        clearable
      >
        <template #right-icon>
          <van-icon 
            name="closed-eye" 
            class="icon"
            v-show="!isUserPasswordShow3"
            @click="changePasswordIsShow3"
          />
          <van-icon 
            name="eye-o" 
            class="icon"
            v-show="isUserPasswordShow3"
            @click="changePasswordIsShow3"
          />
        </template>
      </van-field>
    </van-cell-group>
    <!-- 按钮 -->
    <van-button 
      color="linear-gradient(to right, #ff6034, #ee0a24)" 
      class="ipt"
      @click="changPassword"
    >修改密码</van-button>
  </div>
</template>

<script>
import { CellGroup, Dialog } from 'vant'
import { Field } from 'vant' // 输入框

export default {
  name: 'ChangePassword',
  components: {
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
  },
  data() {
    return {
      isUserPasswordShow1: false,
      isUserPasswordShow2: false,
      isUserPasswordShow3: false,
      password1: '',
      password2: '',
      password3: '',
    }
  },
  methods: {
    // 改变密码是否可视
    changePasswordIsShow1() {
      this.isUserPasswordShow1 = !this.isUserPasswordShow1
      this.$nextTick(()=>{
        this.$refs['userPassword1'].focus()
      })
    },
    changePasswordIsShow2() {
      this.isUserPasswordShow2 = !this.isUserPasswordShow2
      this.$nextTick(()=>{
        this.$refs['userPassword2'].focus()
      })
    },
    changePasswordIsShow3() {
      this.isUserPasswordShow3 = !this.isUserPasswordShow3
      this.$nextTick(()=>{
        this.$refs['userPassword3'].focus()
      })
    },
    // 修改密码
    changPassword() {
      this.isUserPasswordShow1 = false
      this.isUserPasswordShow2 = false
      this.isUserPasswordShow3 = false
      if (this.password1.length === 0 || this.password2.length === 0 || this.password3.length === 0) {
        this.$toast.fail('密码未输入完整')
        return
      }
      if (this.password1.length < this.userConstants.USER_PASSWORD_MIN_LENGTH || 
          this.password2.length < this.userConstants.USER_PASSWORD_MIN_LENGTH || 
          this.password3.length < this.userConstants.USER_PASSWORD_MIN_LENGTH) {
        this.$toast.fail('密码至少为 ' + this.userConstants.USER_PASSWORD_MIN_LENGTH + ' 位')
        return
      }
      if (this.password2 !== this.password3) {
        this.$toast.fail('新密码两次输入不一致')
        return
      }
      Dialog.confirm({
        message: '是否确认修改密码',
      })
      .then(() => {
        // on confirm
        this.req.post(
          'user/change/password/',
          {
            token: localStorage.getItem('token'),
            oldPassword: this.password1,
            newPassword: this.password3,
          }
        ).then(res=>{
          if (res.data.mark === 1) {
            this.$toast.success(res.data.message)
            this.$router.back()
          } else {
            this.$toast.fail(res.data.message)
          }
        }, err=>{
          this.$toast.fail(err)
        })
      })
      .catch(() => {
        // on cancel
      });
    }
  },
}
</script>

<style lang="less" scoped>
// 导航栏样式
.top-nav-bar {
  .icon {
    margin-right: 0.5rem;
    font-size: 1.5rem;
  }
  span {
    font-size: 1.25rem;
  }
}
// 输入框盒子样式
.ipt-box {
  margin: 10% 0 0;
  // padding: 1% 0;
}
// input样式
.ipt {
  margin: 5% 5%;
  height: 3.5rem;
  width: 90%;
  border: 1px solid #ee0a24;
  border-radius: 1.75rem;
}
</style>